<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in tableData">
        <el-card :body-style="{ padding: '0px' }" @click="tapVideo(index)">
          <img :src="item.cover" style="width: 100%; height: auto" />
          <div style="padding: 14px">
            <span>{{ item.name }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    <!-- 添加或修改岗位对话框 -->
    <el-dialog title="新增视频集" v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="BID" prop="bid">
          <el-input v-model="form.bid" placeholder="请输入BID(取自bilibili)" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Video">
import {inject, reactive,toRefs} from "vue";
import { createOne, queryList } from "@/api/video";
import request from "@/utils/request";
import Cookies from "js-cookie";
const host = inject('host');
const router = useRouter();
const { proxy } = getCurrentInstance();
const open = ref(false);
const total = ref(0);
const data = reactive({
  form: {
    bid: "",
    name: "",
    cover: "",
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, form } = toRefs(data);
const tableData = ref();
//列表查询
// 获取列表
function getList() {
  queryList(queryParams.value).then((res) => {
    tableData.value = res.content;
    let t = res.content;
    t.forEach(ele=>{
      ele.cover = host +'/proxy/image?url='+encodeURIComponent(ele.cover)
    })
    tableData.value = t;
    total.value = res.totalElements;
  });
}
// 新增
function handleAdd() {
  open.value = true;
}
// 提交
function submitForm(){
  let bid = form.value.bid;
  console.log(bid)
  proxy.$modal.loading('解析中')
  request({
    url:host+'/video/parse/'+bid,
    method:'get'
  }).then(r=>{
    proxy.$modal.closeLoading();
   
    form.value.name = r.title;
    form.value.cover = r.pic;
    console.log(form.value)
    createOne(form.value).then(res=>{
      open.value = false;
      proxy.$modal.msgSuccess('新建成功');
      getList();
    })
    console.log(r)
  }).catch(e=>{
    proxy.$modal.closeLoading();
    console.log(e)
  })
}
// 点击事件
function tapVideo(e) {
  console.log(e);
  let idx = e;
  let playVideo = tableData.value[idx];
  // 设置缓存
  Cookies.set("playVideo", JSON.stringify(playVideo));
  // 跳转编辑页面
  router.push("/learn/player");
}
getList();
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
